<template>
  <div
    class="mainlogin"
    v-loading="loading"
    element-loading-text="正在登录"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.5)"
  >
    <div class="loginform">
      <div class="header">
        <h4>VessAdmin</h4>
        <p>欢迎登录</p>
      </div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="80px"
        class="demo-ruleForm"
        size="medium"
      >
        <el-form-item label="账号" prop="checkUserName">
          <el-input
            type="text"
            v-model="ruleForm.checkUserName"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="checkPass">
          <el-input
            type="password"
            v-model="ruleForm.checkPass"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item class="service">
          <el-checkbox-group v-model="remenberme">
            <el-checkbox label="记住我" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item class="btns">
          <el-button type="primary" @click="submitForm('ruleForm')"
            >登录</el-button
          >
          <el-button>注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { login } from "@/network/login.js";
import Cookies from "js-cookie";

export default {
  data() {
    var validateUserName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号"));
      } else {
        if (this.ruleForm.checkUserName !== "") {
          this.$refs.ruleForm.validateField("user");
        }
        callback();
      }
    };

    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("pass");
        }
        callback();
      }
    };

    return {
      ruleForm: {
        checkUserName: "",
        checkPass: "",
      },
      rules: {
        checkUserName: [{ validator: validateUserName, trigger: "blur" }],
        checkPass: [{ validator: validatePass, trigger: "blur" }],
      },
      loading: false,
      remenberme: false,
    };
  },
  created() {
    // Cookies.remove("username");
    // Cookies.remove("password");
    this.ruleForm.checkUserName =
      Cookies.get("username") == undefined ? "" : Cookies.get("username");
    this.ruleForm.checkPass =
      Cookies.get("password") == undefined ? "" : Cookies.get("password");
  },
  mounted() {
    this.$notify({
      title: "登录提示",
      dangerouslyUseHTMLString: true,
      message: "<h3>参考账号为admin </br> 密码为admin</h3> ",
      duration: 5000,
    });
  },
  destroyed() {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        //  console.log(valid); //只有俩个表单内容都满足条件时才会为true
        if (valid) {
          this.loading = true;
          login({
            username: this.ruleForm.checkUserName,
            password: this.ruleForm.checkPass,
          }).then((res) => {
            console.log(res);

            if (res.ErrorCode == 200) {
              this.$message({
                message: "登录成功",
                type: "success",
                duration: "1500",
              });
              // console.log(this.ruleForm.remenberme);
              //用户点击记住我    使账号密码保存在本地cookie 30天
              if (this.remenberme) {
                Cookies.set("username", this.ruleForm.checkUserName, {
                  expires: 30,
                });
                Cookies.set("password", this.ruleForm.checkPass, {
                  expires: 30,
                });
              }
              window.localStorage.setItem("token", res.token);
              setTimeout(() => {
                this.loading = false;
                this.$router.push("/index/about");
              }, 1000);
              // console.log(Cookies.get("username"));
              // console.log(Cookies.get("password"));
            } else if (res.ErrorCode != undefined) {
              console.log(res.ErrorCode);
              this.$message.error(res.ErrorMessage);
              this.loading = false;
            } else {
              this.$message.error("服务器未开启");
              this.loading = false;
            }
          });
          // .catch((err) => {
          //   console.log(err + "login");
          // });
        } else {
          this.$message({
            message: "请输入账号密码",
            type: "warning",
          });
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.mainlogin {
  display: flex;
  width: 100%;
  height: 100%;
  background-image: url("../assets/img/background/back3.jpg");
  background-size: cover;
  justify-content: flex-end;
}

.loginform {
  /* flex: 1; */
  background-color: rgba(200, 200, 200, 0.8);
  width: 300px;
  height: 400px;
  border: 1px gainsboro solid;
  align-self: center;
  margin: 0 auto;
  border-radius: 5px;
}
.header {
  text-align: center;
  padding-bottom: 30px;
  padding-top: 20px;
}
.header h4,
p {
  margin: 0;
}
p {
  font-size: 15px;
  margin-top: 10px;
}
.demo-ruleForm {
  width: 90%;
  margin-right: 10%;
}
.service {
  margin: 0 !important;
}
.btns {
  margin-top: 5px;
  margin-bottom: 0;
}
</style>